<template>
    <div class="kapai"  @click=tiaozou()>
                <img src="../../img/logo@3x.png" alt="">
                  <div class="title">{{data.title}}</div>
                  <div class="qianshu">￥{{data.qianshu}}</div>
                  <div class="cishu">x{{data.cishu}}</div>
 </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  mounted() {},
  methods: {
    tiaozou: function() {
      console.log(this.url)
      if (this.url != "") {
        this.$router.push({ name: this.url });
      }
    }
  },
  props: ["data", "url"],
  watch: {}
};
</script>
<style scoped lang="scss">
.kapai {
  width: 696px;
  height: 196px;

  background: url("img/Rectangle4@2x.png");
  background-size: 696px 196px;

  position: relative;
  img {
    height: 108px;
    width: 108px;
    position: absolute;
    top: 38px;
    left: 46px;
    border: 1px solid #cccccc;
    border-radius: 8px;
  }
  .title {
    font-family: PingFangSC-Medium;
    font-size: 36px;
    color: #333333;
    position: absolute;
    top: 34px;
    left: 230px;
  }
  .qianshu {
    font-family: SFUIText-Medium;
    font-size: 48px;
    color: rgba(233, 122, 54, 1);
    font-weight: 800;
    position: absolute;
    bottom: 42px;
    left: 246px;
  }
  .cishu {
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #666666;
    position: absolute;
    top: 48px;
    right: 28px;
  }
}
</style>